<template>
	<div class="sz-form">
		<div class="header">
			<slot name="header"></slot>
		</div>
		<el-form :label-width="labelWidth" :label-position="positions" ref="ruleFormRef" :model="formData" :disabled="disabled">
			<el-row>
				<template v-for="item in formItems" :key="item.label">
					<el-col v-bind="item">
						<el-form-item
							:rules="item.rules"
							:prop="item.field"
							:label="item.label"
							:style="itemStyle"
							:label-width="item.labelWidth"
						>
							<template v-if="item.type === 'input' || item.type === 'password'">
								<el-input
									clearable
									:placeholder="item.placeholder"
									:show-password="item.type === 'password'"
									:rows="3"
									v-model="formData[`${item.field}`]"
								></el-input>
							</template>
							<template v-if="item.type === 'inputTwo'">
								<el-input
										 style="width: 150px"
										clearable
										:placeholder="item.placeholder"
										:show-password="item.type === 'password'"
										:rows="3"
										v-model="formData[`${item.field}`]"
								></el-input>
							</template>
              <template v-if="item.type === 'number'">
								<el-input-number
									clearable
									:placeholder="item.placeholder"
									v-model="formData[`${item.field}`]"
								></el-input-number>
							</template>
							<template v-if="item.type === 'textarea'">
								<el-input
									clearable
									:placeholder="item.placeholder"
									type="textarea"
									:rows="item.rows"
									v-model="formData[`${item.field}`]"
								></el-input>
							</template>
							<template v-if="item.type === 'slot'">
								<slot :name="item.field"></slot>
							</template>
							<template v-else-if="item.type === 'select'">
								<el-select
									clearable
									:placeholder="item.placeholder"
									style="width: 100%"
									v-model="formData[`${item.field}`]"
								>
									<el-option
										v-for="option in item.options"
										:key="option.value"
										:label="option.label"
										:value="option.value"
									>
										{{ option.label }}
									</el-option>
								</el-select>
							</template>
							<template v-else-if="item.type === 'datepicker'">
								<el-date-picker v-bind="item.otherOptions" v-model="formData[`${item.field}`]"></el-date-picker>
							</template>
							<template v-else-if="item.type === 'year'">
								<el-date-picker
									type="year"
									value-format="YYYY"
									placeholder="选择日期"
									v-model="formData[`${item.field}`]"
								></el-date-picker>
							</template>
							<template v-else-if="item.type === 'yearTwo'">
								<el-date-picker
										clearable style="width: 150px"
										type="year"
										value-format="YYYY"
										placeholder="选择日期"
										v-model="formData[`${item.field}`]"
								></el-date-picker>
							</template>
							<template v-else-if="item.type === 'checkboxGroup'">
								<el-checkbox-group v-model="formData[`${item.field}`]">
									<el-checkbox v-for="option in item.options" :label="option.value">
										{{ option.label }}
									</el-checkbox>
								</el-checkbox-group>
							</template>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<div class="footer">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref, watch } from 'vue'
import { IFormItem } from '../types'
import type { FormInstance, FormRules } from 'element-plus'

export default defineComponent({
	props: {
		modelValue: {
			type: Object,
			required: true
		},
		disabled: {
			type: Boolean,
			required: false,
			default: false
		},
		formItems: {
			type: Array as PropType<IFormItem[]>,
			default: () => []
		},
		labelWidth: {
			type: String,
			default: () => '100px'
    },
    positions: {
			type: String,
			default: () => 'right'
		},
		itemStyle: {
			type: Object,
			default: () => ({ padding: '10px 4px' })
    },
    children:{
			type: String,
			default: () => ''
		},
		colLayout: {
			type: Object,
			default: () => ({
				xl: 6,
				lg: 6,
				md: 12,
				sm: 24,
				xs: 24
			})
		}
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		const ruleFormRef = ref<FormInstance>()
		// 展开获取到父组件传来的值，单向数据流
		// const formData = ref({ ...props.modelValue })
		let formData = computed({
			get() {
				return props.modelValue
			},
			set(val) {
				emit('update:modelValue', val)
			}
		})
		// let formData=ref(null)
		// 通过深度侦听formData的值，改变数据时通过emit告诉父组件数据的更新
		// 实现组件的双向绑定
		// watch(
		// formData,
		// 	(newValue) => {
		// 		emit('update:modelValue', newValue)
		// 	},
		// 	{
		// 		deep: true
		// 	}
		// )
		const submitForm = async () => {
			// console.log(ruleFormRef.value.validate)
			let result = false
			if (!ruleFormRef.value) return
			await ruleFormRef.value.validate((valid, fields) => {
				result = valid
			})
			return result
		}
		return {
			formData,
			submitForm,
			ruleFormRef
		}
	}
})
</script>

<style scoped lang="scss">

  /* --el-date-editor-width: 100%; */
  ::v-deep .el-date-editor.el-input{
  width: 100%;
  }

</style>
